<div class="main-content" style="padding:0 10px;" ng-controller="ProcessDetailController">
  <div
    class="help-container"
    ng-if="!model.processInstance && !model.loading && state.noProcesses && (newProcessInstance == null || newProcessInstance == undefined)"
    auto-height
    ng-cloak
  >
    <div>
      <div class="help-text wide">
        <div class="description">
          {{ 'PROCESS.MESSAGE.NO-INSTANCES-HELP' | translate }}
        </div>
        <div
          class="help-entry toggle-create-task"
          ng-class="{'active': newProcessInstance.inline }"
          ng-click="createProcessInstance()"
        >
          <span class="glyphicon glyphicon-plus-sign"></span>
          <span translate="PROCESS.MESSAGE.NO-INSTANCES-HELP-START"></span>
        </div>
      </div>
    </div>
  </div>

  <div
    class="header"
    ng-if="newProcessInstance != null && newProcessInstance != undefined && newProcessInstance.processDefinition"
  >
    <h2>
      <!-- <div class="top-buttons btn-group pull-right" style="width:calc(100% - 30px);top:17px;">
        <div class="btn-toolbar pull-right">
          <button title="关闭窗口" class="btn btn-inverse" ng-click="closeModelWindow()">
            <i class="toolbar-button ng-scope glyphicon glyphicon-remove" data-toggle="tooltip" title="关闭窗口"></i>
          </button>
        </div>
      </div> -->
      <!-- <edit-in-place value="newProcessInstance.name"></edit-in-place> -->
    </h2>
    <h3 class="start-title"><edit-in-place value="newProcessInstance.name"></edit-in-place></h3>
  </div>

  <div
    style="border:1px solid #ccc;margin-top:15px;"
    class="content clearfix"
    offset="6"
    ng-if="newProcessInstance != null && newProcessInstance != undefined && newProcessInstance.processDefinition && newProcessInstance.processDefinition.hasStartForm"
  >
    <div class="alert error" ng-show="startFormError">
      {{ startFormError }}
    </div>
    <div>
      <activiti-form
        process-name="newProcessInstance.name"
        process-definition-id="newProcessInstance.processDefinition.id"
      ></activiti-form>
    </div>
  </div>

  <div
    class="content clearfix"
    auto-height
    offset="6"
    ng-if="newProcessInstance != null && newProcessInstance != undefined && newProcessInstance.processDefinition && !newProcessInstance.processDefinition.hasStartForm"
  >
    <div class="top-buttons">
      <!-- <div class="btn-group pull-right">
        <div class="btn-toolbar pull-right">
          <button title="关闭窗口" class="btn btn-inverse" ng-click="closeModelWindow()">
            <i class="toolbar-button ng-scope glyphicon glyphicon-remove" data-toggle="tooltip" title="关闭窗口"></i>
          </button>
        </div>
      </div> -->
      <!-- <div class="pull-right"> -->
      <button
        class="btn btn-default"
        style="margin: 10px 15px 0 0"
        ng-disabled="newProcessInstance.loading"
        ng-click="startProcessInstanceWithoutForm()"
      >
        {{ 'FORM.DEFAULT-OUTCOME.START-PROCESS' | translate }}
      </button>
    </div>
    <p class="no-form">{{ 'PROCESS.MESSAGE.NO-FORM-PROCESS' | translate }}</p>
  </div>

  <div class="header" ng-if="!newProcessInstance && model.processInstance">
    <div class="btn-group pull-right" ng-show="model.processInstance.startedBy.id == ('' + account.id)">
      <button
        ng-if="!model.processInstance.ended"
        class="btn"
        ng-click="cancelProcess()"
        translate="PROCESS.ACTION.CANCEL"
      ></button>
      <button
        ng-if="model.processInstance.ended"
        class="btn"
        ng-click="deleteProcess()"
        translate="PROCESS.ACTION.DELETE"
      ></button>
    </div>
    <div class="btn-group pull-right" ng-show="model.processInstance.graphicalNotationDefined">
      <button
        class="btn"
        id="processDiagramTrigger"
        translate="PROCESS.ACTION.SHOW-DIAGRAM"
        ng-click="showDiagram()"
      ></button>
    </div>
    <h2>
      {{ (model.processInstance.name && model.processInstance.name) || model.processInstance.processDefinitionName }}
    </h2>

    <div class="detail">
      <span class="label" ng-if="model.processInstance.startedBy">{{ 'PROCESS.FIELD.STARTED-BY' | translate }}: </span>
      <span user-name="model.processInstance.startedBy" ng-if="model.processInstance.startedBy"></span>
      <span class="label">{{ 'PROCESS.FIELD.STARTED' | translate }}: </span>
      <span title="{{ model.processInstance.started | dateformat }}">{{
        model.processInstance.started | dateformat: 'fromNow'
      }}</span>
      <span class="label" ng-show="model.processInstance.ended">{{ 'PROCESS.FIELD.ENDED' | translate }}: </span>
      <span ng-show="model.processInstance.ended" title="{{ model.processInstance.ended | dateformat }}">{{
        model.processInstance.ended | dateformat: 'fromNow'
      }}</span>
    </div>
  </div>

  <div class="content clearfix split" auto-height offset="6" ng-if="!newProcessInstance && model.processInstance">
    <div class="split-right">
      <div class="section">
        <h3
          close-on-select="false"
          ng-click="toggleCreateComment()"
          title="{{ 'PROCESS.ACTION.ADD-COMMENT' | translate }}"
        >
          {{ 'PROCESS.SECTION.COMMENTS' | translate }}
          <span class="action">
            <a>+</a>
          </span>
        </h3>

        <div class="form-group clearfix box" ng-show="model.addComment" auto-focus="model.addComment">
          <textarea
            class="form-control focusable"
            rows="2"
            ng-disabled="model.commentLoading"
            ng-model="model.newComment"
            id="add-comment-inline"
            placeholder="{{ 'PROCESS.MESSAGE.NEW-COMMENT-PLACEHOLDER' | translate }}"
          >
          </textarea>

          <div class="pull-right">
            <button
              tabindex="-1"
              class="btn btn-xs"
              translate="GENERAL.ACTION.CANCEL"
              ng-click="toggleCreateComment()"
              ng-disabled="model.commentLoading"
            ></button>
            <button
              class="btn btn-xs"
              translate="PROCESS.ACTION.ADD-COMMENT-CONFIRM"
              ng-disabled="!model.newComment || model.commentLoading || model.newComment.length > 4000"
              ng-click="confirmNewComment()"
            ></button>
          </div>
        </div>
        <ul class="simple-list comments selectable" ng-show="model.comments.data.length">
          <li ng-repeat="comment in model.comments.data">
            <div class="title">
              <div user-picture="comment.createdBy"></div>
              {{ 'PROCESS.MESSAGE.COMMENT-HEADER' | translate: comment }}
            </div>
            <div class="message">{{ comment.message }}</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="split-left">
      <div class="section pack">
        <h3 translate="PROCESS.SECTION.ACTIVE-TASKS"></h3>
        <ul class="simple-list checklist">
          <li ng-repeat="task in model.processTasks" ng-click="openTask(task)">
            <div class="clearfix">
              <div class="pull-right">
                <span class="badge" ng-if="task.dueDate">
                  {{ 'TASK.MESSAGE.DUE-ON' | translate }} {{ task.dueDate | dateformat: 'fromNow' }}
                </span>
                <span class="badge" ng-if="!task.dueDate">
                  {{ 'TASK.MESSAGE.CREATED-ON' | translate }} {{ task.created | dateformat: 'fromNow' }}
                </span>
              </div>
              <div>
                <div user-picture="task.assignee"></div>
                {{ (task.name && task.name) || ('TASK.MESSAGE.NO-NAME' | translate) }}
              </div>
              <div class="subtle">
                <span ng-if="task.assignee.id">
                  {{ 'TASK.MESSAGE.ASSIGNEE' | translate }}
                  {{ task.assignee.firstName && task.assignee.firstName != 'null' ? task.assignee.firstName : '' }}
                  {{ task.assignee.lastName && task.assignee.lastName != 'null' ? task.assignee.lastName : '' }}
                </span>
                <span ng-if="!task.assignee.id" translate="TASK.MESSAGE.NO-ASSIGNEE"> </span>
              </div>
            </div>
          </li>
        </ul>
        <div class="nothing-to-see" ng-show="!model.processTasks || model.processTasks.length == 0">
          <span translate="PROCESS.MESSAGE.NO-TASKS"></span>
        </div>
      </div>
      <div class="section pack" ng-show="model.processInstance.startFormDefined">
        <h3 translate="PROCESS.SECTION.START-FORM" id="startForm"></h3>
        <ul class="simple-list checklist">
          <li ng-click="openStartForm()" class="complete">
            <div class="clearfix">
              <div>
                <div user-picture="model.processInstance.startedBy"></div>
                <span translate="PROCESS.SECTION.START-FORM"></span>
              </div>
              <div class="subtle">
                <span ng-if="model.processInstance.startedBy.id">
                  {{ 'TASK.MESSAGE.COMPLETED-BY' | translate }}
                  {{
                    model.processInstance.startedBy.firstName && model.processInstance.startedBy.firstName != 'null'
                      ? model.processInstance.startedBy.firstName
                      : ''
                  }}
                  {{
                    model.processInstance.startedBy.lastName && model.processInstance.startedBy.lastName != 'null'
                      ? model.processInstance.startedBy.lastName
                      : ''
                  }}
                  {{ model.processInstance.started | dateformat: 'fromNow' }}
                </span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="section pack">
        <h3 translate="PROCESS.SECTION.COMPLETED-TASKS" id="completedTasks"></h3>
        <ul class="simple-list checklist">
          <li ng-repeat="task in model.completedProcessTasks" ng-click="openTask(task)" class="complete">
            <div class="clearfix">
              <div class="pull-right">
                <span class="badge">
                  {{ 'TASK.MESSAGE.DURATION' | translate: task }}
                </span>
              </div>
              <div>
                <div user-picture="task.assignee"></div>
                {{ (task.name && task.name) || ('TASK.MESSAGE.NO-NAME' | translate) }}
              </div>
              <div class="subtle">
                <span ng-if="task.assignee.id">
                  {{ 'TASK.MESSAGE.COMPLETED-BY' | translate }}
                  {{ task.assignee.firstName && task.assignee.firstName != 'null' ? task.assignee.firstName : '' }}
                  {{ task.assignee.lastName && task.assignee.lastName != 'null' ? task.assignee.lastName : '' }}
                  {{ task.endDate | dateformat: 'fromNow' }}
                </span>
                <span ng-if="!task.assignee.id" translate="TASK.MESSAGE.NO-ASSIGNEE"> </span>
              </div>
            </div>
          </li>
        </ul>
        <div class="nothing-to-see" ng-show="model.completedProcessTasks.length == 0">
          <span translate="PROCESS.MESSAGE.NO-COMPLETED-TASKS"></span>
        </div>
      </div>
    </div>
  </div>
</div>
